<template>
    <!-- 提交表单 -->
    <a-form :form="form" @submit="handleSubmit">
  
  
      <!-- 教育培训经历板块 -->
      <a-form-item
        v-for="(k, index) in form.getFieldValue('keys')"
        :key="k"
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        :label="index === 0 ? '教育经历（必填）' : ''"
        :required="true"
      >
          <a-range-picker  v-decorator="[`edurange[${k}]`, {rules: [{ type: 'array', required: true, message: '请输入教育时间段' }]}]" 
          :placeholder="['开始时间', '结束时间']"
          style="width: 90%; margin-right: 8px"
          />
        <!-- 教育经历中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `eduSchool[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您的学校/培训机构',
                },
              ],
            },
          ]"
          placeholder="学校/培训机构"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 教育经历中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `eduSubject[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              // 字段空验证
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您教育的专业',
                },
              ],
            },
          ]"
          placeholder="专业"
          style="width: 90%; margin-right: 8px"
        />
  
        <!-- 教育经历中的字段 -->
        <a-input
          v-decorator="[
            // 字段名
            `certificate[${k}]`,
            {
              validateTrigger: ['change', 'blur'], 
            },
          ]"
          placeholder="所获证书(选填)"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 删除一个教育经历按钮 -->
        <a-icon
          v-if="form.getFieldValue('keys').length >= 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="form.getFieldValue('keys').length === 1"
          @click="() => remove(k)"
        />
      </a-form-item>
      <!-- 添加一个教育经历按钮 -->
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 100%" @click="add">
          <a-icon type="plus" /> 添加教育经历（必填）
        </a-button>
      </a-form-item>
      <!-- 教育经历板块结束 -->
  
  
      <!-- 工作经历板块 -->
      <!-- 添加div是因为防止因为第一区块定义两个key导致控制台一直出现警告信息 -->
  <div>
      <a-form-item
        v-for="(x, indexs) in form.getFieldValue('keyss')"
        :key="x"
        v-bind="indexs === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        :label="indexs === 0 ? '工作经历（必填）' : ''"
        :required="true"
      >

      <a-range-picker  v-decorator="[`workrange[${x}]`, {rules: [{ type: 'array', required: true, message: '请输入工作时间段' }]}]" 
          :placeholder="['开始时间', '结束时间']"
          style="width: 90%; margin-right: 8px"
          />

        <!-- 工作经历字段 -->
        <a-input
          v-decorator="[
            `unitName[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您之前工作单位的名称',
                },
              ],
            },
          ]"
          placeholder="单位名称"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 工作经历字段 -->
        <a-input
          v-decorator="[
            `duties[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您之前工作的职务',
                },
              ],
            },
          ]"
          placeholder="职务"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 工作经历字段 -->
        <a-input
          v-decorator="[
            `wages[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您之前工作单位的薪金',
                },
              ],
            },
          ]"
          placeholder="薪金"
          style="width: 90%; margin-right: 8px"
        />
        <!-- 工作经历字段 -->
        <a-input
          v-decorator="[
            `leavingReason[${x}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请填写您的离职原因',
                },
              ],
            },
          ]"
          placeholder="离职原因"
          style="width: 90%; margin-right: 8px"
        />
        <a-icon
          v-if="form.getFieldValue('keyss').length >= 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="form.getFieldValue('keyss').length === 1"
          @click="() => removes(x)"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 100%" @click="adds">
          <a-icon type="plus" /> 添加工作经历（必填）
        </a-button>
      </a-form-item>
    </div>
    <!-- 工作经历板块结束 -->
  
  
    <!-- 表单提交按钮 -->
      <!-- <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
      </a-form-item> -->
    </a-form>
  </template>
  <script>
  let id = 0;
  let ids = 0;
  import moment from 'moment'
  export default {
    data() {
      return {
        // 栅格布局数据定义
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 4 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 20 },
          },
        },
        formItemLayoutWithOutLabel: {
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 },
          },
        },
        thirdvalues:{
            thirdpassby:0

        },
        
      };
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
      this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
      this.form.getFieldDecorator('keyss', { initialValue: [], preserve: true });
    },
  
  
  
    methods: {
      // 工作经历板块移除功能
      remove(k) {
        const { form } = this;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        // We need at least one passenger
        if (keys.length === 1) {
          return;
        }
        // can use data-binding to set
        form.setFieldsValue({
          keys: keys.filter(key => key !== k),
        });
      },
  
      // 近亲属板块移除功能
      removes(x) {
        const { form } = this;
        // can use data-binding to get
        const keyss = form.getFieldValue('keyss');
        // We need at least one passenger
        if (keyss.length === 1) {
          return;
        }
        // can use data-binding to set
        form.setFieldsValue({
          keyss: keyss.filter(key => key !== x),
        });
      },
  
      // 近亲属板块添加功能
      adds() {
        const { form } = this;
        // can use data-binding to get
        const keyss = form.getFieldValue('keyss');
        const nextKeys = keyss.concat(ids++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keyss: nextKeys,
        });
      },
  
  
  
      // 工作经历板块添加功能
      add() {
        const { form } = this;
        // can use data-binding to get
        const keys = form.getFieldValue('keys');
        const nextKeys = keys.concat(id++);
        // can use data-binding to set
        // important! notify form to detect changes
        form.setFieldsValue({
          keys: nextKeys,
        });
      },
  
  
  
      // 提交按钮触发事件
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, fieldsValue) => {
          if (!err) {
            const { keys, names } = fieldsValue;
            const { keyss,name  } = fieldsValue
            const keylength = Object.getOwnPropertyNames(keys).length - 1
            const keyslength = Object.getOwnPropertyNames(keyss).length - 1
            // 修改时间戳格式
            // for(var i = 0;i<keylength;i++){
            //   fieldsValue.edurange[i] = [moment(fieldsValue.edurange[i][0]).format('YYYY-MM-DD'),moment(fieldsValue.edurange[i][1]).format('YYYY-MM-DD')]
            // }
            // for(var x = 0;x<keyslength;x++){
            //   fieldsValue.workrange[x] = [moment(fieldsValue.workrange[x][0]).format('YYYY-MM-DD'),moment(fieldsValue.workrange[x][1]).format('YYYY-MM-DD')]
            // }
            
            // fieldsValue.range.forEach(function(e){
            //               e = [moment(e[0]).format('YYYY-MM-DD'),moment(e[1]).format('YYYY-MM-DD')];
            //               // console.log(e)
            // })
  
            const thirdvalues ={
              ...fieldsValue,
            }
            this.thirdvalues = thirdvalues
            this.thirdvalues.thirdpassby = 1
            console.log('Received values of form: ', thirdvalues);
          }
        });
      },
    },
  };
  </script>
  <style>
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  </style>